<template>
  <el-form 
    :model="fm.ps"
    :ref="fm.fname"
    :inline="true"
    :label-width="'120px'"
    class="card-item">
    <el-form-item 
      :label="source.label" 
      prop="imgSrc"
      :rules="[{required: true, message: '上传图片', trigger: 'change'}]">
      <UploadImg
        :src="fileBaseUrl+fm.ps.imgSrc"
        :imgName="'imgSrc'"
        @getImgUrl="setImgUrl"
        :ps="{ userName: uname }"
        url="/company/upload"
      />
    </el-form-item>

    <el-form-item 
      label-width="0" 
      prop="dataTime"
      :rules="[{required: true, message: '下次到期时间', trigger: 'change'}]">
      <el-date-picker
        style="width: 135px"
        v-model="fm.ps.dataTime"
        type="date" clearable
        :picker-options="pickerOption"
        value-format="yyyy-MM-dd"
        placeholder="下次到期日期"
      />
    </el-form-item>

    <el-form-item 
      label="提前" 
      label-width="60" 
      prop="day"
      :rules="[{required: true, message: '提前时间不能为空', trigger: 'change'}]">
      <el-input 
        v-model="fm.ps.day" 
        maxlength="4" 
        placeholder="提前天数"
        style="width: 100px;margin-right:10px;">
        <b slot="suffix" class="c-bbb">天</b>  
      </el-input>

      <el-button 
        icon="el-icon-message-solid" 
        type="primary" 
        @click="handleTips">
        提醒
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {mapGetters} from "vuex";
import UploadImg from '@/components/UploadImg';

export default {
  name: "CardItem",
  props: ['source', 'datas'],
  computed: {
    ...mapGetters(["uname"]),
  },
  components: { UploadImg },
  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,

      fm: {
        fname: 'cardItemFm',
        ps: {
          // 图片地址
          imgSrc: '',
          // 到期日期
          dataTime: '',
          // 提前天数
          day: '',
        }
      },

      // 日期控制
      pickerOption: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        }
      },

    }
  },
  mounted() {
    if (this.datas?.length !== 0) {
      let ret = this.datas.find(it => it.remindType === this.source.value)
      if (ret) {
        let {operPhotoUrl, nextRemindTime, nextRemindEarlyDays} = ret;
        this.fm.ps = {
          imgSrc: operPhotoUrl,
          dataTime: nextRemindTime,
          day: nextRemindEarlyDays,
        }
      }
    }
  },
  methods: {
    // 设置-图片
    setImgUrl(data) {
      this.fm.ps.imgSrc = data.url;
      this.U.clearFmVali(this, this.fm.fname, 'imgSrc');
    },

    // 处理数据
    normalizeData() {
      const {imgSrc, dataTime, day} = this.fm.ps;
      return {
        operPhotoUrl: imgSrc,
        remindType: this.source.value,
        nextRemindTime: dataTime,
        nextRemindEarlyDays: day,
      }
    },
    // 验证表单
    async validate() {
      const that = this, fm = that.fm;

      await that.$nextTick();
      let params = {
        validate: false,
        data: null,
      }

      // 只要存在一个填写 那么其他都要填
      let values = Object.values(fm.ps);
      let result = values.some(it => it);
      params.validate = result;
      if (result) {
        return new Promise((resolve, reject) => {
          that.$refs[fm.fname].validate(validate => {
            params.validate = validate;
            params.data = that.normalizeData();
            resolve(params);
          });
        });
      } else {
        that.$refs[fm.fname].clearValidate();
        return new Promise((resolve, reject) => {
          resolve(params);
        });
      }
    },

    // 提醒
    handleTips() {
      const that = this, U = that.U;

      if (!that.fm.ps.day) {
        U.qwarning(`请先设置${that.source.label}提前通知时间！`);
      }else{
        U.qwarning(`系统将会在${that.source.label}证件过期,【${that.fm.ps.day}】天之前提醒您！`);
      }
    },

  }
}
</script>
<style lang="less" scoped>
.card-item{
  .upload-img{
    width: 50px !important;
    height: 28px !important;

    ::v-deep .el-upload .avatar-uploader-icon{
      line-height: 28px !important;
    }
  }
}
</style>
